Vue Js Toggle Dropdown Menu : A toggle dropdown menu in Vue.js is a UI component that provides a way for the user to reveal or hide additional information or options. It is usually represented by a button or a link that, when clicked, opens a dropdown list with additional content. This content can be any type of HTML element such as text, links, images, or even other components. The dropdown menu can be implemented using Vue’s directives, event handling, and conditional rendering. The toggle dropdown menu is a useful UI pattern for providing a compact and convenient way for users to access additional information or options without taking up too much screen space.
Vue.js Dropdown Menu | Tutorial | Example
This code is an implementation of a dropdown menu using Vue.js, a progressive JavaScript framework for building user interfaces. The code creates a dropdown component with a button that displays “Dropdown” and a menu with three options: “Action 1”, “Action 2”, and “Action 3”.
Here’s a step-by-step explanation of the code:
- HTML Structure:The dropdown component is placed inside a div with an id of “app”. The dropdown component consists of two main parts: the button and the dropdown menu.
- Dropdown Button: The button is created using a “button” element with the class “dropdown-toggle”. When the button is clicked, the “show” data property is toggled by using the “@click” directive.
- Dropdown Menu: The dropdown menu is created as a div with the class “dropdown-menu”. The menu is conditionally rendered using the “v-if” directive and the “show” data property. The “slide” transition is applied to the menu using the “transition” component.
- JavaScript: The code imports the “createApp” function from the Vue.js library and uses it to create a Vue app. The app has a “data” function that returns an object with a “show” property, which is initially set to false. The app is then mounted on the “app” div.
- Interaction: When the dropdown button is clicked, the “show” property is toggled, causing the dropdown menu to appear or disappear. The “slide” transition is applied to the menu to make the transition smoother.
Vue Js Toggle Droopdown | Example
<div id="app">
<div class="dropdown">
<button class="dropdown-toggle" @click="show = !show">
Dropdown
</button>
<transition name="slide">
<div class="dropdown-menu" v-if="show">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
<a class="dropdown-item" href="#">Action 3</a>
</div>
</transition>
</div>
</div>
<script type="module">
import { createApp } from "vue";
createApp({
data() {
return {
show: false
}
},
}).mount("#app");
</script>
Output of above example
![](https://danatec.vn/wp-content/uploads/2024/07/7-7.webp)